<template>
  <div>
    <div class="container"></div>
    <!-- <div id="blocklyDiv" style="display: inline-block; height: 600px; width: 600px"></div> -->
  </div>
</template>

<script>
import "pixi";
import "p2";
import Phaser from "phaser";
import "../assets/js/iso_custom";
import ScratchBlocksHorizontal from "scratch-blocks/dist/horizontal";
import Interpreter from "js-interpreter";
export default {
  components: {},
  props: {},
  data() {
    return {
      game: null,
      cube: require("../assets/images/cube.png"),
      mediaUrl: "./static/media/",
      moveOrder: [1, 1, 1, 1],
      orderIndex: 0,
      oldIndex: 0
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {
    function sleep(milliSeconds) {
      var StartTime = new Date().getTime();
      let i = 0;
      while (new Date().getTime() < StartTime + milliSeconds);
    }

    let self = this;
    var isoGroup, player;
    function preload() {
      self.game.load.image("cube", self.cube);

      self.game.time.advancedTiming = true;

      // Add and enable the plug-in.
      self.game.plugins.add(new Phaser.Plugin.Isometric(self.game));
      // Start the IsoArcade physics system.
      self.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);

      // This is used to set a game canvas-based offset for the 0, 0, 0 isometric coordinate - by default
      // this point would be at screen coordinates 0, 0 (top left) which is usually undesirable.
      self.game.iso.anchor.setTo(0.5, 0.2);
    }

    function create() {
      //   game.add.sprite(0, 0, "cube");
      // Create a group for our tiles, so we can use Group.sort
      isoGroup = self.game.add.group();
      // Set the global gravity for IsoArcade.

      // Let's make a load of cubes on a grid, but do it back-to-front so they get added out of order.
      var cube;
      for (var xx = 228; xx > 0; xx -= 38) {
        for (var yy = 228; yy > 0; yy -= 38) {
          // Create a cube using the new game.add.isoSprite factory method at the specified position.
          // The last parameter is the group you want to add it to (just like game.add.sprite)
          cube = self.game.add.isoSprite(xx, yy, 0, "cube", 0, isoGroup);
          cube.anchor.set(0.5);

          // Enable the physics body on this cube.
          self.game.physics.isoArcade.enable(cube);
          // Collide with the world bounds so it doesn't go falling forever or fly off the screen!
          cube.body.collideWorldBounds = true;

          // Add a full bounce on the x and y axes, and a bit on the z axis.
          cube.body.bounce.set(1, 1, 0.2);

          // Add some X and Y drag to make cubes slow down after being pushed.
          cube.body.drag.set(100, 100, 0);
          cube.body.gravity.setTo(0, 0, -5000);
        }
      }

      // Create another cube as our 'player', and set it up just like the cubes above.
      player = self.game.add.isoSprite(76, 76, 38, "cube", 0, isoGroup);
      player.tint = 0x86bfda;
      player.anchor.set(0.5);
      self.game.physics.isoArcade.enable(player);
      player.body.collideWorldBounds = true;
      player.body.checkCollision.frontX = false;
      player.body.checkCollision.frontY = false;
      player.body.checkCollision.backX = false;
      player.body.checkCollision.backY = false;
      player.body.gravity.setTo(0, 0, -500);
      // Set up our controls.
      this.cursors = self.game.input.keyboard.createCursorKeys();

      self.game.input.keyboard.addKeyCapture([
        Phaser.Keyboard.LEFT,
        Phaser.Keyboard.RIGHT,
        Phaser.Keyboard.UP,
        Phaser.Keyboard.DOWN,
        Phaser.Keyboard.SPACEBAR
      ]);

      var space = self.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

      space.onDown.add(function() {
        player.body.velocity.z = 220;
      }, this);
    }
    function update() {
      // Move the player at this speed.
      var speed = 38;

      if (
        self.moveOrder[self.orderIndex] === 1 &&
        (self.orderIndex === 0 || self.oldIndex !== self.orderIndex)
      ) {
        player.body.velocity.y = speed;
        player.body.velocity.z = 220;
        console.log("!");
        sleep(1000);
        self.oldIndex = self.orderIndex++;
        player.body.velocity.y = 0;
      }

      self.game.physics.isoArcade.collide(isoGroup);
      self.game.iso.topologicalSort(isoGroup);
    }
    self.game = new Phaser.Game(
      600,
      600,
      Phaser.AUTO,
      "container",
      {
        preload: preload,
        create: create,
        update: update
      }
      //   true
    );
  },
  beforeDestroy() {
    if (this.game !== null) {
      this.game.destroy();
    }
  }
};
</script>
